<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>房源列表</title>
    <!-- 引入bootstrap样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="css/bootstrap-table.min.css" rel="stylesheet">

    <!-- jquery -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- bootstrap-table.min.js -->
    <script src="js/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="js/bootstrap-table-zh-CN.min.js"></script>

<script src="js/moment-with-locales.min.js"></script>
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="js/bootstrap-datetimepicker.min.js"></script>

    <style type="text/css">
        header{
            height: 65px;
            background: rgba(247,235,175,1);
        }
        header span{
            line-height: 65px;
            font-size:22px;
            font-weight: bolder;
            float: left;
            margin-left: 50px;
        }
        header #login{
            display: inline-block;
            float: right;
            margin-right: 150px;
            margin-top: 15px;
        }
        body {
            height: 670px;
            background: url(image/16.jpg) no-repeat;
            background-size: 100% 100%;
            text-align: center;
        }
        input,select, textarea,.input-group{
            height: 25px;
            border: 0;
            border-radius: 3px;
            margin-bottom: 15px;
        }
        .sideBar{
            width: 200px;
            height: 550px;
            /* display: inline-block; */
            float: left;
            background: rgba(255,255,208,0.8);
            border-right:1px solid rgba(247,235,175,1);
        }
        .table-responsive{
            /*height: 500px;*/
            width: 1100px;
            margin: 30px auto;
            background: rgba(255,255,208,0.6);
            border: 1px solid rgba(204,204,254,1);
            border-radius:10px;
        }
        .fixed-table-container thead th .th-inner{
            background: rgba(153,204,103,1)
        }
    </style>
</head>
<body>

<header>
    <span align="left">分享式民宿酒店预订系统———房源列表</span>

</header>
<div class="sideBar">
    <div class="row" style="width: 215px;">
        <div class="span2">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">房间预定</a></li>
                <li><a href="reservehistory.html">我的订单</a></li>
                <li><a href="vieworderdatails.html">个人中心</a></li>
                <li><a href="index.html" id="over">注销登录</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="reservehistory">
    <div class="table-responsive">
        <table id="table"></table>
    </div>
</div>

<!-- 预定信息提交弹出页 -->
    <div class="modal fade" id="orderensurance" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" artableia-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title" id="myModalLabel">您将预定的房间是：</h2></div>
          <div class="modal-body">
              <div class="publishHotel">

    <div>
      <div class="data-common">
      <label class="common-label">
      <span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;&nbsp;房源类型:
      </label>
      <label class="common-label" type="text" id="housingType">(某某家)酒店公寓</label>
      </div>
    </div>

    <div>
      <div class="data-common">
      <label class="common-label">
      <span class="glyphicon glyphicon-send" aria-hidden="true"></span>&nbsp;&nbsp;房间类型:</label>
      <label class="common-label" type="text" id="roomType">两室一厅</label>
      </div>

      <div class="data-common">
      <label class="common-label">
      <span class="glyphicon glyphicon-grain" aria-hidden="true"></span>&nbsp;&nbsp;入住人数:</label>
      <input  type="text" id="canLiveNumber">
      </div>
    </div>  
    <div>
     <div>
      <div class="data-common">
      <label class="common-label">
      <span class="glyphicon glyphicon-import" aria-hidden="true"></span>&nbsp;&nbsp;入住时间:</label>
      <div class="input-group" style="width: 200px;margin-left: 200px;" >  
      <input type="text" class="form-control date " id='availableTime'>  
                <span class="input-group-addon">  
                    <i class="glyphicon glyphicon-calendar"></i>  
                </span></div>
      </div>

        <div class="data-common">
      <label class="common-label">
      <span class="glyphicon glyphicon-export" aria-hidden="true"></span>&nbsp;&nbsp;离店时间:</label>
      <div class="input-group" style="width: 200px; margin-left: 200px;" >  
      <input type="text" class="form-control date " id='endTime'>  
                <span class="input-group-addon">  
                    <i class="glyphicon glyphicon-calendar"></i>  
                </span></div>
      </div>

          <div class="data-common">
      <label class="common-label">
      <h4><span class="glyphicon glyphicon-star" aria-hidden="true"></span>&nbsp;&nbsp;价格:
      </label>
      <label class="common-label" type="text" id="price">300元/一晚</label></h4>
          </div>
     </div>        
    </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox"></div>
                </div>
              </div>
  <!-- </div> -->
          </div>
          <div class="modal-footer">
            <button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="submit" class="btn btn-success" id="orderhouse">立即预定</button>        
          </div>
        </div>
      </div>
    </div>



</body>
<script type="text/javascript">
    $(document).ready(function(){
        var userId = localStorage.getItem('userId')//获取用户Id
        console.log(userId)
        if(!userId){
            window.location.href='index.html'
            //无用户id（级无登陆直接近页面不可以，直接去登录）
        }
         $('.date').datetimepicker({  
          format: 'YYYY-MM-DD',  
          locale: moment.locale('zh-cn')  
        }); 
        $('#table').bootstrapTable({
            url: "/housing/list",
            striped: true,  //表格显示条纹，默认为false
            pageSize: 100, // 页面数据条数
            pageNumber: 1, // 首页页码
            queryParams: {
                city: '',
                liveInTime: ''
            },
            sortName: 'keyId',
            columns: [{
                align: "center",
                field: 'userId',
                title: "发布人"
            },{
                align: "center",
                field: 'city',
                title: "所在城市"
            },{
                align: "center",
                field: 'address',
                title: "地址"
            },{
                align: "center",
                field: 'housingType',
                title: "房源类型"
            },{
                align: "center",
                field: 'roomType',
                title: "房间类型"
            },{
                align: "center",
                field: 'availableStartTime',
                title: "可入住时间",
                formatter:function (value,row,index) {
                    return value.replace(/T.+/,"");
                }
            },{
                align: "center",
                field: 'availableEndTime',
                title: "入住截止时间",
                formatter:function (value,row,index) {
                    return value.replace(/T.+/,"");
                }
            },{
                align: "center",
                field: 'price',
                title: "房间定价"
            },{
                align: "center",
                field: '',
                title: "详情",
                formatter: function(value,row,index){
                    return '<a href="orderdetails.html?housingKeyId='+ row.keyId +'" class="btn btn-success btn-xs houseDetail" data-id="'+ row.keyId
                            +'">查看</a>&nbsp;&nbsp;<button class="btn btn-success btn-xs reseve" data-id="'+ row.keyId+'">预定</button>'
                }
            },
            ],// 要排序的字段
            onLoadSuccess: function (data) { //加载成功时执行


            },
            onLoadError: function (res) { //加载失败时执行
                console.log(res);
            }
        })
        $(document).on("click",".reseve",function(){
          var id = $(this).attr("data-id")
          $.get("/housing/findOne",{housingKeyId: id},function(data){
              var data = data.data
              $("#orderensurance").modal('show')
              $("#price").html(data.price)
              $("#housingType").html(data.housingType)
              $("#roomType").html(data.roomType)
              $("#orderhouse").attr("data-id",data.keyId)
          })
        })
        $("#orderhouse").click(function(){
          var data = {
            userId: userId,
            housingId: $(this).attr("data-id"),
            peopleNumber: $("#canLiveNumber").val(),
            stayInTime: $("#availableTime").val(),
            checkOutTime: $("#endTime").val()}

          $.get("/order/add",data,function(data){
            if(data.code ==1){
              $("#orderensurance").modal('hide')
              alert("预订成功")
            }else{
              alert(data.data)
            }
            
          })
        })
        // 注销事件
        $("#over").click(function(){
            localStorage.setItem('userId', '')
        });
    });
</script>
</html>
